<html>

<head>
    <title>wfs demo</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/css/ol.css" type="text/css">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.14.1/build/ol.js"></script>
</head>

<body>

<div id="map" style="width:100%;height:100%;"></div>

<script>
    var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
            format: new ol.format.GeoJSON(),
            url: 'http://localhost:8080/geoserver/webgis/wms?service=WMS&version=1.1.0&request=GetMap&layers=webgis%3Ayuelu-polygon&bbox=112.612864%2C27.971063%2C112.971803%2C28.275305&width=768&height=650&srs=EPSG%3A4326&styles=&format=application%2Fopenlayers3'
        }),
        style: function(feature, resolution) {
            return new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'blue',
                    width: 1
                })
            });
        }
    });

    var map = new ol.Map({
        layers: [new ol.layer.Tile({
            source: new ol.source.OSM()
        }), vector],
        target: 'map',
        view: new ol.View({
            center: [-73.99710639567148, 40.742270050255556],
            maxZoom: 19,
            zoom: 14,
            projection: 'EPSG:4326'
        })
    });
</script>

</body>

</html>